<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
		<el-form :inline="true" :model="filters" :size="size">
			<el-row style="text-align: left;">
				<el-form-item>
				    <el-select v-model="filters.type" placeholder="商家" style="width:200px">
					  <el-option label="录屏商家02" value="1">录屏商家02</el-option>
					  <el-option label="育学园-商城" value="1">育学园-商城</el-option>
					  <el-option label="张小二服饰" value="1">张小二服饰</el-option>
					  <el-option label="育学园-商城" value="1">育学园-商城</el-option>
				    </el-select>
				</el-form-item>
				<el-form-item>
				  <el-select v-model="filters.status" placeholder="审核状态" style="width:200px">
					  <el-option label="确认" value="1">确认</el-option>
					  <el-option label="待审核" value="1">待审核</el-option>
					  <el-option label="已审核" value="1">已审核</el-option>
				  </el-select>
				</el-form-item>
				<el-form-item>
				  <el-input v-model="filters.number" placeholder="合同编码" style="width:200px"></el-input>
				</el-form-item>
				<el-form-item>
				  <el-input v-model="filters.name" placeholder="模板名称" style="width:200px"></el-input>
				</el-form-item>

				<el-form-item>
				   <el-date-picker v-model="filters.startDate" type="date" value-format="yyyy-MM-dd" placeholder="合同生效时间起" style="width:200px"></el-date-picker>
				</el-form-item>
				<el-form-item>
				   <el-date-picker v-model="filters.endDate" type="date" value-format="yyyy-MM-dd" placeholder="合同生效时间止" style="width:200px"></el-date-picker>
				</el-form-item>
				

			</el-row>
			<el-row style="text-align: left;">
				<el-form-item>
				  <el-input v-model="filters.number" placeholder="供应商编码" style="width:200px"></el-input>
				</el-form-item>
				<el-form-item>
				  <el-input v-model="filters.number" placeholder="供应商名称" style="width:200px"></el-input>
				</el-form-item>
				
				<el-form-item>
				   <el-date-picker v-model="filters.startDate" type="date" value-format="yyyy-MM-dd" placeholder="合同失效时间起" style="width:200px"></el-date-picker>
				</el-form-item>
				<el-form-item>
				   <el-date-picker v-model="filters.endDate" type="date" value-format="yyyy-MM-dd" placeholder="合同失效时间止" style="width:200px"></el-date-picker>
				</el-form-item>
				<el-form-item>
				<!-- <el-input v-model="filters.type" placeholder="模板分类"></el-input> -->
				  <el-select v-model="filters.status" placeholder="合同属性" style="width:200px">
					  <el-option label="统采统付" value="1">统采统付</el-option>
					  <el-option label="分签分付" value="1">分签分付</el-option>
					  <el-option label="自采合同" value="1">自采合同</el-option>
				  </el-select>
				</el-form-item>

			</el-row>
			
			
			<el-row style="text-align: left;">
				
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-plus" :label="$t('action.add')"  type="primary" @click="handleAdd" />
				</el-form-item>
				<!-- <el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" label="导出"  @click="download" type="primary"/>
				</el-form-item> -->
				<el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" label="重启"  @click="confim" type="primary"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" label="续签"  @click="confim" type="primary"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" label="延期"  @click="confim" type="primary"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" label="变更"  @click="confim" type="primary"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-pencil" label="审核"  @click="confim" type="primary"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" label="暂停"  @click="confim" type="primary"/>
				</el-form-item>
				
				
			</el-row>
			
		</el-form>
	</div>
	<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
				</el-tooltip>
				<el-tooltip content="导出" placement="top">
					<el-button icon="fa fa-file-excel-o"  @click="downloadExcel" ></el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
		<!--表格显示列界面-->
		<table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
		
	</div>
	<!--表格内容栏-->
	<CyTable :height="350"
      :data="pageResult"
      :columns="filterColumns"
      @findPage="findPage"
      @handleDelete="handleDelete"
	  @handleEdit="handleDetail" ref="CyTable">
	</CyTable>
	 
	<!--新增编辑界面-->
	<el-dialog :title="operation?'新增':'编辑'" width="35%" :visible.sync="dialogVisible" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
			
			<el-row>

				<el-form-item label="供应商编码" prop="number">
						<el-input v-model="dataForm.number"  auto-complete="off"></el-input>
				</el-form-item>
	
				<el-form-item label="供应商名称" prop="remark">
					<el-input v-model="dataForm.remark" auto-complete="off"></el-input>
				</el-form-item>
				
			</el-row>
			<el-row style="text-align:center">
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				
			</el-row>
			<template>
				<el-table :data="tableData" border	style="width: 100%">
					<el-table-column prop="suppliernumber" label="供应商编码"></el-table-column>
					<el-table-column prop="suppliername" label="供应商名称"></el-table-column>
				</el-table>
			</template>
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
		</div>
	</el-dialog>

    <!--合同详情页面-->
	<el-dialog :title="operation?'详情页面':'详情页面'" width="85%" :visible.sync="detailpage" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="300px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
		<el-row style="margin-top: -40px;">	
			<el-row>
                <el-col :span="8">
					<el-form-item label="合同编码:" prop="number">HT1912220007189664
				    </el-form-item>
				</el-col>
				
	            <el-col :span="8">
					<el-form-item label="供应商编码:" prop="remark">1911290006883258
				</el-form-item>
				</el-col>
				
                <el-col :span="8">
					<el-form-item label="供应商名称:" prop="remark">对账人民币经销供应商
				</el-form-item>
				</el-col>
				
				
			</el-row>
			<el-row>
                <el-col :span="8">
					<el-form-item label="合同类型:" prop="number">经销合同
				</el-form-item>
				</el-col>
				

	            <el-col :span="8">
					<el-form-item label="交易币:" prop="remark">CNY
				    </el-form-item>
				</el-col>
				
                <el-col :span="8">
					<el-form-item label="合同状态:" prop="remark">未保存
				</el-form-item>
				</el-col>
				
				
			</el-row>
			<el-row >
                <el-col :span="8">
					<el-form-item label="创建时间:" prop="number">2019-12-22 14:59:09
				</el-form-item>
				</el-col>
				
	            <el-col :span="8">
					<el-form-item label="商家名称:" prop="remark">张小二服饰
				</el-form-item>
				</el-col>
				
                <el-col :span="8">
					<el-form-item label="版本号:" prop="remark">V0
				</el-form-item>
				</el-col>
				
				
			</el-row>
			<el-row >

				<el-form-item label="合同属性" prop="number">自采合同
				</el-form-item>

			</el-row>
		</el-row>
			
			<template>
				<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
					<!-- 基本信息 -->
					<el-tab-pane label="基本信息" name="1">
						<el-row>
							 <el-checkbox v-model="checked" @change="onchange">外贸合同</el-checkbox>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="生效日期" prop="number">
									<el-date-picker v-model="filters.startDate" type="date" value-format="yyyy-MM-dd" placeholder="生效日期" style="width:200px"></el-date-picker>
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="失效日期" prop="remark">
									<el-date-picker v-model="filters.startDate" type="date" value-format="yyyy-MM-dd" placeholder="失效日期" style="width:200px"></el-date-picker>
							</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							 <el-checkbox v-model="checked1" @change="onchangeType">指定合同商品类目</el-checkbox>
						</el-row>
						<!-- 财务信息 -->
						 
						<!-- <el-row>
							 <el-span>财务信息</el-span>
						</el-row> -->
						<el-row style="margin-top: -25px;">
							<el-divider content-position="center">
							 <el-span style="font-size:18px;font-weight:800">
								 财务信息
							</el-span>
						    </el-divider>
							<el-col :span="12">
								<el-form-item label="结算方式" prop="number" >
									<el-select style="width:200px">
										<el-option label="账期结算" value="1">账期结算</el-option>
										<el-option label="账期结算" value="1">账期结算</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="付款账期" prop="number" >
									<el-select style="width:200px">
										<el-option label="日账期" value="1">日账期</el-option>
										<el-option label="月账期" value="1">月账期</el-option>
										<el-option label="年账期" value="1">年账期</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="支持开票" prop="number"  >
									<el-radio-group v-model="radio1" @change="isInvoicing">
										<el-radio  label="1" border>允许</el-radio>
									    <el-radio  label="2" border>不允许</el-radio>
									</el-radio-group>
									
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="支持专票" prop="number" v-if="Supportticket">
									<el-radio-group v-model="radio2">
										<el-radio  label="3" border>备选项</el-radio>
										<el-radio  label="4" border>不允许</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>


						<!-- 外贸信息 -->
						<el-row  v-if="foreignTrade" style="text-align:center;margin-top: -35px;">
							<el-divider content-position="center">
								<el-span style="font-size:18px;font-weight:800">
									外贸信息
								</el-span>
							</el-divider>
							<!-- <el-row style="text-align:left">
								<el-span>外贸信息</el-span>
							</el-row> -->
							<el-row>
								<el-col :span="8">
									<el-form-item label="结算货币" prop="number" >
										<el-select style="width:200px">
											<el-option label="账期结算" value="1">账期结算</el-option>
											<el-option label="账期结算" value="1">账期结算</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								
								<el-col :span="8">
									<el-form-item label="贸易方式" prop="number" >
										<el-select style="width:200px">
											<el-option label="日账期" value="1">日账期</el-option>
											<el-option label="月账期" value="1">月账期</el-option>
											<el-option label="年账期" value="1">年账期</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="成交方式" prop="number" >
										<el-select style="width:200px">
											<el-option label="工厂交货（EXW）" value="1">工厂交货（EXW）</el-option>
											<el-option label="边境交货(DAF)" value="1">边境交货(DAF)</el-option>
											<el-option label="目的港船上交货(DES)" value="1">目的港船上交货(DES)</el-option>
											<el-option label="目的港码头交货(DEQ)" value="1">目的港码头交货(DEQ)</el-option>
											<el-option label="未完税交货(DDU)" value="1">未完税交货(DDU)</el-option>
											<el-option label="完税后交货(DDP)" value="1">完税后交货(DDP)</el-option>
											<el-option label="货交承运人（FCA）" value="1">货交承运人（FCA）</el-option>
											<el-option label="船边交货（FAS)" value="1">船边交货（FAS)</el-option>
											<el-option label="船上交货（FOB）" value="1">船上交货（FOB）</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8">
									<el-form-item label="运输方式" prop="number" >
										<el-select style="width:200px">
											<el-option label="海运" value="1">海运</el-option>
											<el-option label="多式联运" value="1">多式联运</el-option>
											<el-option label="空运" value="1">空运</el-option>
											<el-option label="铁路" value="1">铁路</el-option>
											<el-option label="公路" value="1">公路</el-option>
											<el-option label="内河" value="1">内河</el-option>
											<el-option label="专递或邮寄" value="1">专递或邮寄</el-option>
										
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="装运港" prop="number" >
										<el-select style="width:200px">
											<el-option label="账期结算" value="1">账期结算</el-option>
											<el-option label="账期结算" value="1">账期结算</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								
								<el-col :span="8">
									<el-form-item label="抵运港" prop="number" >
										<el-select style="width:200px">
											<el-option label="日账期" value="1">日账期</el-option>
											<el-option label="月账期" value="1">月账期</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								
							</el-row>
						</el-row>
                       
					   <el-row v-if="types" style="text-align:center;margin-top: -23px;">
						   <el-divider content-position="center">
							   <el-span style="font-size:18px;font-weight:800">
							      商品类目
							   </el-span>
							</el-divider>
							<!-- <el-row style="text-align:left">
								<el-span>商品类目</el-span>
							</el-row> -->
							<el-row>
								<el-col :span="6">
									<el-form-item>
									  <el-checkbox v-model="a" > 营养辅食</el-checkbox>
								    </el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item>
									  <el-checkbox v-model="b" > 母婴用品</el-checkbox>
								    </el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item>
									  <el-checkbox v-model="d" > 早教玩具</el-checkbox>
								    </el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item>
									  <el-checkbox v-model="c" > 食品</el-checkbox>
								    </el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="6">
									<el-form-item>
									  <el-checkbox v-model="a" > 臻选图书</el-checkbox>
								    </el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item>
									  <el-checkbox v-model="b" > 宝宝日用</el-checkbox>
								    </el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item>
									  <el-checkbox v-model="d" >  箱包</el-checkbox>
								    </el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item>
									  <el-checkbox v-model="c" > 化妆品</el-checkbox>
								    </el-form-item>
								</el-col>
								
							</el-row>
					   </el-row>

						<el-row >
							<el-form-item label="备注" prop="remark" >
								<el-input type="textarea" v-model="filters.remark" style="width:1000px"></el-input>
							</el-form-item>
						</el-row>
						<el-row style="text-align:center">
							<el-form-item>
							  <kt-button icon="fa fa-save" label="保存"  type="primary" @click="findPage(filters)"/>
						   </el-form-item>
						</el-row>
						
					</el-tab-pane>
					<el-tab-pane label="费用信息" name="2">
						<el-button :size="size" @click="confim" type="primary">删除所选费用类型</el-button>
						<el-button :size="size" @click="addprice" type="primary">添加费用类型</el-button>

						<template>
							<el-table :data="tableDataprice" border style="width: 100%">
								<el-table-column type="selection" width="55"> </el-table-column>
								<el-table-column prop="1" label="费用类型编码" width="180"></el-table-column>
								<el-table-column prop="2" label="费用类型名称" width="180"></el-table-column>
								<el-table-column prop="3" label="计费周期"></el-table-column>
								<el-table-column prop="4" label="计费基准"></el-table-column>
								<el-table-column prop="5" label="计费方式"></el-table-column>
								<el-table-column prop="6" label="生成费用单方式"></el-table-column>
								<el-table-column prop="7" label="审核方式"></el-table-column>
								<el-table-column prop="8" label="是否设置保底金额"></el-table-column>
								<el-table-column prop="9" label="保底金额"></el-table-column>
								<el-table-column prop="10" label="费用金额(元)"></el-table-column>
								<el-table-column prop="11" label="计费比率"></el-table-column>
								<el-table-column prop="12" label="备注"></el-table-column>
								<el-table-column prop="13" label="阶梯费用"></el-table-column>
							</el-table>
						</template>
					</el-tab-pane>
					<el-tab-pane label="合同附件" name="3">
						<el-button :size="size" @click="uploadfile" type="primary">上传合同附件</el-button>
						<el-button :size="size" @click="handleDelete" type="primary">删除</el-button>
						<template>
							<el-table border style="width: 100%">
								 <el-table-column type="selection" width="55"> </el-table-column>
								<el-table-column prop="1" label="合同附件" width="180"></el-table-column>
								<el-table-column prop="2" label="上载人" width="180"></el-table-column>
								<el-table-column prop="3" label="时间"></el-table-column>
							</el-table>
						</template>
					</el-tab-pane>
					<el-tab-pane label="查看合同协议" name="4">
						<el-button :size="size" @click="addprotocol" type="primary">新增合同模板</el-button>
						<template>

							<el-table :data="tableDataprotocol" border style="width: 100%">

								<el-table-column prop="1" label="合同类型" width="180"></el-table-column>
								<el-table-column prop="2" label="模板编号" width="180"></el-table-column>
								<el-table-column prop="3" label="版本号"></el-table-column>
								<el-table-column prop="4" label="模板名称"></el-table-column>
								<el-table-column prop="5" label="模板附件"></el-table-column>
								<el-table-column prop="6" label="上载人"></el-table-column>
								<el-table-column prop="7" label="上载时间"></el-table-column>
								<el-table-column prop="8" label="备注"></el-table-column>
								<el-table-column
								fixed="right"
								label="操作"
								width="100">
								<template slot-scope="scope">
									<el-button @click="addprotocol" type="text" size="small">编辑</el-button>
									<el-button type="text" size="small" @click="handleDelete">删除</el-button>
								</template>
								</el-table-column>
							</el-table>
						</template>
					</el-tab-pane>
					<el-tab-pane label="操作日志" name="5">
						<template>

							<el-table :data="tableDatapeople" border style="width: 100%">
								<el-table-column prop="1" label="操作用户ID" width="180"></el-table-column>
								<el-table-column prop="2" label="操作人" width="180"></el-table-column>
								<el-table-column prop="3" label="操作时间"></el-table-column>
								<el-table-column prop="4" label="操作"></el-table-column>
								<el-table-column prop="5" label="备注"></el-table-column>
							</el-table>
						</template>

					</el-tab-pane>
					<el-tab-pane label="联系人" name="6">
						<el-button :size="size" @click="addlink" type="primary">新增联系人</el-button>
						<template>
							<el-table :data="tableDatalink" border style="width: 100%">
								<el-table-column prop="1" label="联系人" width="180"></el-table-column>
								<el-table-column prop="2" label="联系人职位" width="180"></el-table-column>
								<el-table-column prop="3" label="联系人固定电话"></el-table-column>
								<el-table-column prop="4" label="联系人手机"></el-table-column>
								<el-table-column prop="5" label="联系人Email"></el-table-column>
								<el-table-column prop="6" label="联系地址"></el-table-column>
								<el-table-column prop="7" label="主要联系人"></el-table-column>
								<el-table-column prop="8" label="备注"></el-table-column>
								<el-table-column
								fixed="right"
								label="操作"
								width="100">
								<template slot-scope="scope">
									<el-button @click="handleDelete" type="text" size="small">删除</el-button>
									<el-button type="text" size="small" @click="editLink">编辑</el-button>
								</template>
								</el-table-column>
							</el-table>
						</template>
					</el-tab-pane>
					<el-tab-pane label="店铺信息" name="7">
						<el-button :size="size" @click="addshop" type="primary">添加店铺组织</el-button>
						<template>
							<el-table :data="tableDatashop" border style="width: 100%">
								<el-table-column prop="1" label="店铺编码" width="180"></el-table-column>
								<el-table-column prop="2" label="店铺名称" width="180"></el-table-column>
								<el-table-column prop="3" label="店铺类型"></el-table-column>
								<el-table-column prop="4" label="店铺地址"></el-table-column>
								<el-table-column
								fixed="right"
								label="操作"
								width="100">
								<template slot-scope="scope">
									<el-button @click="handleDelete" type="text" size="small">删除</el-button>
								</template>
								</el-table-column>
							</el-table>
						</template>
					</el-tab-pane>
				</el-tabs>
			</template>
			<!-- <el-row style="text-align:center">
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				
			</el-row> -->
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" @click="confim" type="primary">确认</el-button>
			<el-button :size="size" @click="handleDelete" type="primary">删除</el-button>
			<el-button :size="size" @click.native="detailpage = false">{{$t('action.cancel')}}</el-button>
		</div>
	</el-dialog>
    <!-- 添加费用弹框 -->
	<el-dialog :title="operation?'新增':'编辑'" width="35%" :visible.sync="priceModal" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
			
			<el-row>

				<el-form-item label="一级费用类型" prop="currentFeeType1" >
						<!-- <el-input v-model="dataForm.number"  auto-complete="off"></el-input> -->
						<el-select style="width:200px">
							<el-option label="一级费用类型">一级费用类型</el-option>
							<el-option label="二级费用类型">二级费用类型</el-option>
							<el-option label="三级费用类型">三级费用类型</el-option>
						</el-select>
				</el-form-item>
	
				<el-form-item label="计费周期" prop="remark" >
					   <el-select style="width:200px">
							<el-option label="按月">按月</el-option>
							<el-option label="按季度">按季度</el-option>
							<el-option label="按年">按年</el-option>
							<el-option label="一次性费用">一次性费用</el-option>
							<el-option label="手动创建">手动创建</el-option>
						</el-select>
				</el-form-item>
				<el-form-item label="计费方式" prop="priceType"  >
					<el-select v-model="dataForm.priceType" @change="changecount" style="width:200px">
							<el-option label="固定比例" value="1">固定比例</el-option>
							<el-option label="固定金额" value="2">固定金额</el-option>
							<el-option label="阶梯费用" value="3">阶梯费用</el-option>
						</el-select>
				</el-form-item>
				<el-form-item label="计费基准" prop="countStandard"  v-if="countStandard">
					<el-select style="width:200px">
							<el-option label="销售额" value="1">销售额</el-option>
							<el-option label="销售成本" value="2">销售成本</el-option>
							<el-option label="进退货金额" value="3">进退货金额</el-option>
						</el-select>
				</el-form-item>
				<el-form-item label="生成费用单方式" prop="remark" >
					<el-select style="width:200px">
							<el-option label="自动生成">自动生成</el-option>
							<el-option label="手动生成">手动生成</el-option>
						</el-select>
				</el-form-item>
				<el-form-item label="审核方式" prop="remark" >
					<el-select style="width:200px">
							<el-option label="自动审核">自动审核</el-option>
							<el-option label="手动审核">手动审核</el-option>
						</el-select>
				</el-form-item>
				<el-form-item label="计费比率" prop="deductionRate" v-if="deductionRate">
					<el-input v-model="dataForm.remark" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="设置保底金额" prop="isGuarantee" v-if="isGuarantee">
					<el-radio-group v-model="radio3" @change="isnumValue">
						<el-radio  label="1" border>是</el-radio>
						<el-radio  label="2" border>否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="保底金额" prop="numValue" v-if="numValue">
					<el-input v-model="dataForm.numValue" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="费用金额(元)" prop="numValue" v-if="priceValue">
					<el-input v-model="dataForm.numValue" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="dataForm.remark" auto-complete="off"></el-input>
				</el-form-item>
				
			</el-row>
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" @click="confim" type="primary">确认</el-button>
			<el-button :size="size" @click.native="priceModal = false">{{$t('action.cancel')}}</el-button>
		</div>
	</el-dialog>
   <!-- 上传弹框 -->
	<el-dialog title="上传合同附件" width="35%" :visible.sync="uploadModal" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-row>

				<el-form-item label="请选择">
					<el-input type="file"></el-input>	
				</el-form-item>
	
			</el-row>
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" @click="confim" type="primary">确认</el-button>
			<el-button :size="size" @click.native="uploadModal = false">{{$t('action.cancel')}}</el-button>
		</div>
	</el-dialog>
   <!-- 合同模板 -->
	<el-dialog :title="operation?'新增':'编辑'" width="65%" :visible.sync="condialogVisible" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
			
			<el-row>

				<el-form-item label="模板编号" prop="number">
						<el-input v-model="dataForm.number"  auto-complete="off"></el-input>
				</el-form-item>
				
				<el-form-item label="商家" prop="business">
					<!-- <el-input v-model="dataForm.business"  auto-complete="off" ></el-input> -->
					 <el-select v-model="dataForm.business" placeholder="商家" style="width:200px">
					  <el-option label="录屏商家02" value="1">录屏商家02</el-option>
					  <el-option label="育学园-商城" value="1">育学园-商城</el-option>
					  <el-option label="张小二服饰" value="1">张小二服饰</el-option>
					  <el-option label="育学园-商城" value="1">育学园-商城</el-option>
				    </el-select>
				</el-form-item>
		        <el-form-item label="模板分类" prop="type">
						<el-input v-model="dataForm.type"  auto-complete="off" ></el-input>
				</el-form-item>
				<el-form-item label="模板名称" prop="name">
						<el-input v-model="dataForm.remains" auto-complete="off" ></el-input>
				</el-form-item>
				<el-form-item label="模板附件" prop="template">
					<el-input  v-model="dataForm.template" auto-complete="off" ></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="dataForm.remark" auto-complete="off"></el-input>
				</el-form-item>
			</el-row>
			<el-row>
			</el-row>
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" @click.native="condialogVisible = false">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>
    <!-- 联系人弹框 -->
	<el-dialog :title="operation?'新增':'编辑'" width="65%" :visible.sync="linkerModal" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
			
			<el-row>

				<el-form-item label="联系人" prop="number">
						<el-input v-model="dataForm.number"  auto-complete="off"></el-input>
				</el-form-item>
				
				<el-form-item label="联系人职位" prop="business">
					<el-input v-model="dataForm.business"  auto-complete="off" ></el-input>
					
				</el-form-item>
		        <el-form-item label="联系人固定电话" prop="type">
						<el-input v-model="dataForm.type"  auto-complete="off" ></el-input>
				</el-form-item>
				<el-form-item label="联系人Email" prop="name">
						<el-input v-model="dataForm.remains" auto-complete="off" ></el-input>
				</el-form-item>
				<el-form-item label="联系地址" prop="template">
					<el-input  v-model="dataForm.template" auto-complete="off" ></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="dataForm.remark" auto-complete="off"></el-input>
				</el-form-item>
			</el-row>
			<el-row>
			</el-row>
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" @click.native="linkerModal = false">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>
    <!-- 店铺弹框 -->
	<el-dialog :title="operation?'新增':'编辑'" width="45%" :visible.sync="shopModal" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
			
			<el-row>

				<el-form-item label="供应商编码" prop="number">
						<el-input v-model="dataForm.number"  auto-complete="off"></el-input>
				</el-form-item>
	
				<el-form-item label="供应商名称" prop="remark">
					<el-input v-model="dataForm.remark" auto-complete="off"></el-input>
				</el-form-item>
				
			</el-row>
			<el-row style="text-align:center">
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				
			</el-row>
			<template>
				<el-table :data="tableDatashopmodal" border	style="width: 100%">
					 <el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="business" label="商家名称"></el-table-column>
					<el-table-column prop="shopname" label="店铺编码"></el-table-column>
					<el-table-column prop="shopname" label="店铺编码"></el-table-column>
					<el-table-column prop="shoptype" label="店铺类型"></el-table-column>
				</el-table>
			</template>
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" @click="confim"  type="primary">提交</el-button>
			<el-button :size="size" @click.native="shopModal = false">{{$t('action.cancel')}}</el-button>
		</div>
	</el-dialog>

	

	
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
import XLSX from 'xlsx'
import axios from 'axios'
export default {
	components:{
		PopupTreeInput,
		CyTable,
		KtButton,
		TableColumnFilterDialog
	},
	data() {
		return {
			excelup:this.utils.getUpLoadHost(),
			size: 'small',
			radio1: '1',
			radio2: '1',
			radio3: '1',
			priceValue:false,//费用金额
			deductionRate:true,//计费比率
			isGuarantee:true,//设置保底金额
			countStandard:true,//计费基准
			numValue:true,//保底金额
			Supportticket:true,
			foreignTrade:false,
			types:false,
			shopModal:false,
			linkerModal:false,
			priceModal:false,
			checked:false,
			condialogVisible:false,
			uploadModal:false,
			checked1:false,
			document_license:'',
			activeName: '1',
			filters: {
				name: '',
				res:{
					"total": 1,
					"code": "0000",
					"rows": [{
					"number": '20190922150928',
					"business":'谷雨服饰',
					"contractattributes": '自采合同',
					"tradingcurrency": 'CNY',
					"invalid": '无效',
					"suppliernumber": '1911290006883258',
					"suppliername": '四季服装供应商',
					"effectivetime": '2019-10-11',
					"timefailure": '2019-11-1',
					"type": '正常合同',
					"status":"暂停",
					"numbered": 'HT1910110000055740',
					"creator": '13875977921',
					},
					{
					"number": '20190922150928',
					"business":'秋分服饰',
					"contractattributes": '自采合同',
					"tradingcurrency": 'CNY',
					"invalid": '有效',
					"suppliernumber": '1911290006883258',
					"suppliername": '四季服装供应商',
					"effectivetime": '2019-10-11',
					"timefailure": '2019-11-1',
					"type": '正常合同',
					"status":"暂停",
					"numbered": 'HT1910110000055740',
					"creator": '13875977921',
					},
					{
					"number": '20190922150928',
					"business":'冬至服饰',
					"contractattributes": '自采合同',
					"tradingcurrency": 'CNY',
					"invalid": '无效',
					"suppliernumber": '1911290006883258',
					"suppliername": '四季服装供应商',
					"effectivetime": '2019-10-11',
					"timefailure": '2019-11-1',
					"type": '正常合同',
					"status":"暂停",
					"numbered": 'HT1910110000055740',
					"creator": '13875977921',
					}]
				}
			},
			tableDataprice: [{
			1: '001',
			2: '三A费用类型',
			3: '按月',
			4: '销售额',
			5: '固定比例',
			6: '自动生成',
			7: '自动审核',
			8: '是',
			9: '111.00',
			10: '0.00',
			11: '0',
			12: '否',
			13: '否',
			}],
			tableDataprotocol: [{
			1: '经销合同',
			2: '20190917155550',
			3: 'V1',
			4: '经销合同模板',
			5: ' 3.jpg',
			6: 'merchant',
			7: '2019-09-17 15:55:50',
			8: '是',
			}],
			tableDatapeople: [{
			1: '19090215374897',
			2: 'superadmin',
			3: '2019-12-25 14:46:19',
			4: '添加合同原件',
			5: '是',
			},
			{
			1: '19090215374897',
			2: 'superadmin',
			3: '2019-12-25 14:46:19',
			4: '添加合同原件',
			5: '是',
			},
			{
			1: '19090215374897',
			2: 'superadmin',
			3: '2019-12-25 14:46:19',
			4: '添加合同原件',
			5: '是',
			}],
			tableDatalink: [{
			1: '李四',
			2: '总经理',
			3: '13678945621',
			4: '13678945621',
			5: '13678945621@163.com',
			6: '上海美术学院',
			7: '张三',
			},
			{
			1: '李四',
			2: '总经理',
			3: '13678945621',
			4: '13678945621',
			5: '13678945621@163.com',
			6: '上海美术学院',
			7: '张三',
			},
			{
			1: '李四',
			2: '总经理',
			3: '13678945621',
			4: '13678945621',
			5: '13678945621@163.com',
			6: '上海美术学院',
			7: '张三',
			}],
			tableDatashop: [{
			1: 'jd_001',
			2: '京东店',
			3: '直营店',
			4: '上海美术学院',
			},
			{
			1: 'jd_001',
			2: '京东店',
			3: '直营店',
			4: '上海美术学院',
			},
			{
			1: 'jd_001',
			2: '京东店',
			3: '直营店',
			4: '上海美术学院',
			}],
			tableDatashopmodal: [{
			business: '张小二服饰',
			shopnumber: 'd_001',
			shopname: '京东店',
			shoptype: '	线上店铺',
			},
			{
			business: '张小二服饰',
			property: 'd_001',
			shopname: '京东店',
			shoptype: '	线上店铺',
			},
			{
			business: '张小二服饰',
			property: 'd_001',
			shopname: '京东店',
			shoptype: '	线上店铺',
			},],
			value:0,
			columns: [], 
			tabJson:'',
		
			warehouselist:[] , 
			filterColumns: [],
			pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {},
			dialogImageUrl: '',
			
			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			printPage: false,
			dialogVisibleImage:false,
			detailpage:false,
			dataFormRules: {
				number: [
					{ required: true, message: '请输入绑定手机号', trigger: 'blur' }
				],
				type: [
					{ required: true, message: '请输入充值卡金额', trigger: 'blur' }
				],
				bu: [
					{ required: true, message: '请输入充值卡余额', trigger: 'blur' }
				],
				remains: [
					{ required: true, message: '请输入创建时间', trigger: 'blur' }
				],
				template: [
					{ required: true, message: '请输入截止时间', trigger: 'blur' }
				],
				memberid: [
					{ required: true, message: '请输入使用人', trigger: 'blur' }
				],
				status: [
					{ required: true, message: '请输入是否调整', trigger: 'blur' }
				],
				production_time: [
					{ required: true, message: '请选择状态', trigger: 'change' }
				]
				
			},
			dataForm: {
				
			},
			deptData: [],
			deptTreeProps: {
				label: 'name',
				children: 'children'
			},
			roles: [],
			
			tableData:[
		 {
			number: '20190922150928',
			business:'张小二服饰',
            contractattributes: '自采合同',
			tradingcurrency: 'CNY',
			invalid: '无效',
			suppliernumber: '1911290006883258',
			suppliername: '美元供应商',
			effectivetime: '2019-10-11',
			timefailure: '2019-11-1',
			type: '正常合同',
			status:"暂停",
			numbered: 'HT1910110000055740',
			creator: '13875977921',

          }, {
			number: '20190922150928',
			business:'张小二服饰',
            contractattributes: '自采合同',
			tradingcurrency: 'CNY',
			invalid: '无效',
			suppliernumber: '1911290006883258',
			suppliername: '美元供应商',
			effectivetime: '2019-10-11',
			timefailure: '2019-11-1',
			type: '正常合同',
			status:"暂停",
			numbered: 'HT1910110000055740',
			creator: '13875977921',

          },{
			number: '20190922150928',
			business:'张小二服饰',
            contractattributes: '自采合同',
			tradingcurrency: 'CNY',
			invalid: '无效',
			suppliernumber: '1911290006883258',
			suppliername: '美元供应商',
			effectivetime: '2019-10-11',
			timefailure: '2019-11-1',
			type: '正常合同',
			status:"暂停",
			numbered: 'HT1910110000055740',
			creator: '13875977921',

          }, {
			number: '20190922150928',
			business:'张小二服饰',
            contractattributes: '自采合同',
			tradingcurrency: 'CNY',
			invalid: '无效',
			suppliernumber: '1911290006883258',
			suppliername: '美元供应商',
			effectivetime: '2019-10-11',
			timefailure: '2019-11-1',
			type: '正常合同',
			status:"暂停",
			numbered: 'HT1910110000055740',
			creator: '13875977921',

          },]
		}
	},
	methods: {
	   // 获取分页数据
	  findPage: function (data) {
        this.$refs.CyTable.findPageStaticState(this.filters);
	  },
	  changecount(data){
		 if(data==2){
			 this.countStandard=false
			 this.isGuarantee=false
			 this.deductionRate=false
			 this.numValue=false
			 this.priceValue=true
		 }else if(data==3){
			 this.deductionRate=false
			 this.isGuarantee=false
			 this.numValue=false
			 this.priceValue=false
			 this.countStandard=true
		 } else{
			 this.countStandard=true
			 this.isGuarantee=true
			 this.deductionRate=true
			 this.numValue=true
			 this.priceValue=false
		 }
	  },
	  isnumValue(data){
		  if(data==1){
			this.numValue=true 
		  }else{
			this.numValue=false  
		  }
	  },
	  isInvoicing (data){
       if(data==1){
         this.Supportticket=true
	   }else if(data==2){
         this.Supportticket=false
	   }
	  },
	  addshop (){
        this.shopModal=true;
	  },
	  editLink(){
		  this.linkerModal=true
	  },
	  addlink(){
		  this.linkerModal=true
	  },
	  //合同模板新增
	  addprotocol(){
        this.condialogVisible=true;
	  },
	  //上传
	  uploadfile(){
       this.uploadModal=true;
	  },
	  //费用信息新增
	  addprice (){
        this.priceModal=true;
	  },
	  onchange (data){
		if(data==true){
			this.foreignTrade=true;
		}else{
			this.foreignTrade=false;
		} 

	  },
	   onchangeType (data){
		if(data==true){
			this.types=true;
		}else{
			this.types=false;
		} 

	  },
	  confim(){
		  this.$message({ message: '操作成功', type: 'success' })
	  },
	  handleDetail (){
		  this.detailpage=true;
	  },
	  handleClick(tab, event) {
        console.log(tab, event);
      },
		
        //弹窗关闭方法
		handleClose (){
			 this.$refs.dataForm.resetFields()
		},
		detailed (){
			this.$router.push({ path:'/Paje/DetailedMsg'})
		},
		download (){
			this.$router.push({ path:'/Paje/DetailedMsg'})
		},
		// 批量删除
		  handleDelete: function (data) {
//             var ids='';
//             for(var i=0;i<data.params.length;i++){
//                ids=ids+data.params[i].id+',';
//             }
//             data.t='chargeCard'
//             data.ids=ids
//             this.utils.request.deleteUserInfo(data,this.deleteInfoBack)
               this.$message({ message: '操作成功', type: 'success' })
        },
        //删除callback
        deleteInfoBack(data){
	        if(data.code == '0000') {
				this.$message({ message: '操作成功', type: 'success' })
			} else {
				this.$message({message: '操作失败, ', type: 'error'})
			}
             this.findPage();
        },

      //列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { 
			let filename="库存盘点"
			this.$refs.CyTable.exportData(this.filters,this.filterColumns,filename)
          }).catch(() => {
 
          });
		},
		// 显示新增界面
		handleAdd: function () {
			this.dialogVisible = true
			this.operation = true
			this.dataForm.id="";
			//this.dataForm={};
			if (this.$refs['dataForm']!=undefined) {
				this.$refs['dataForm'].resetFields();
			}
			this.dataForm.document_license="";
		},
		// 打印
		print:function(){
		  this.printPage=true
		  this.operation = true
		},
		reset:function(){
		   this.filters={};
		   this.findPage()
		},
		
		// 显示编辑界面
		handleEdit: function (params) {
			console.log(params)
			this.dialogVisible = true
			this.operation = false
			var this_ = this;
			this.$nextTick(function(){
              this_.dataForm = Object.assign({}, params);
			});
			// var search={};
			// search.id=params.row.id
			// search.t="chargeCard";
			
			// this.utils.request.queryUserInfo(search,function(res){

            //     if(res.code == "0000"){	
			// 		}else{
			// 			this_.$message({message: '获取产品信息异常', type: 'error'});
			// 		}

			// })

		},
		// 编辑
		   submitForm: function () {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
// 	                    var this_ = this;
//                         this.editLoading = true
//                         let params = Object.assign({}, this.dataForm)
//                         params.t='chargeCard';
//                         this.utils.request.editUserInfo(params,this.editInfoBack)
						   this.$message({ message: '操作成功', type: 'success' })
						   this.dialogVisible = false
                    })
                }
            })
        },
        // 新增修改回调
        editInfoBack: function (data) {
			if(data.code == '0000') {
				this.$message({ message: '操作成功', type: 'success' })
			} else {
				this.$message({message: '操作失败', type: 'error'})
			}
            this.findPage();
            this.dialogVisible = false
            this.operation = false
            this.editLoading= false
        },
      
		
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},

		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},
		// 处理表格列过滤显示
       initColumns: function () {
		let temp = [];
		this.columns=[
				{prop:"number", label:"合同编码", minWidth:120},
				{prop:"business", label:"商家名称", minWidth:120},
				{prop:"contractattributes", label:"合同属性", minWidth:120},
				{prop:"tradingcurrency", label:"交易币别", minWidth:120},
				{prop:"invalid", label:"是否失效", minWidth:120},
				{prop:"suppliernumber", label:"供应商编码", minWidth:120},
				{prop:"suppliername", label:"供应商名称", minWidth:120},
				{prop:"effectivetime", label:"合同生效时间", minWidth:120},
				{prop:"timefailure", label:"合同失效时间", minWidth:120},
				{prop:"type", label:"合同变更", minWidth:120},
				{prop:"status", label:"履行状态", minWidth:120},
				{prop:"numbered", label:"原合同编号", minWidth:120},
				{prop:"creator", label:"制单人", minWidth:120},
				
			]
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      }
       
      
	},
	mounted() {
		this.initColumns()
	}
	
	
}
 
		
</script>

<style scoped>
 /deep/ .el-input__inner {
    width: 200px;
}
 .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
 

</style>